<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>顶点着色器</title>
    <meta name="description" content=""/>
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no"/>
</head>
<body>
	<canvas width = "570" height = "570" id = "my_Canvas"></canvas>
    <script type="text/javascript">
         var canvas = document.getElementById('my_Canvas');
         var gl = canvas.getContext('experimental-webgl');

         //3D 顶点坐标系，6个面，每个面4顶点
        var vertices = [
            -1,-1,-1, 1,-1,-1, 1, 1,-1, -1, 1,-1,
            -1,-1, 1, 1,-1, 1, 1, 1, 1, -1, 1, 1,
            -1,-1,-1, -1, 1,-1, -1, 1, 1, -1,-1, 1,
            1,-1,-1, 1, 1,-1, 1, 1, 1, 1,-1, 1,
            -1,-1,-1, -1,-1, 1, 1,-1, 1, 1,-1,-1,
            -1, 1,-1, -1, 1, 1, 1, 1, 1, 1, 1,-1, 
         ];

         // 绘制索引
         var colors = [
            5,3,7, 5,3,7, 5,3,7, 5,3,7,
            1,1,3, 1,1,3, 1,1,3, 1,1,3,
            0,0,1, 0,0,1, 0,0,1, 0,0,1,
            1,0,0, 1,0,0, 1,0,0, 1,0,0,
            1,1,0, 1,1,0, 1,1,0, 1,1,0,
            0,1,0, 0,1,0, 0,1,0, 0,1,0 
         ];

         var indices = [
            0,1,2, 0,2,3, 4,5,6, 4,6,7,
            8,9,10, 8,10,11, 12,13,14, 12,14,15,
            16,17,18, 16,18,19, 20,21,22, 20,22,23 
         ];

         //创建缓冲区
         var vertex_buffer = gl.createBuffer();
         //将创建出来的缓冲区绑定到webGL对向上，这里我们使用了2个参数，第一个是类型，因为我们使用的是数组的点数据，所以使用系统提供的 
         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
         //将我们的点位置数组传入到Buffer对象中 该方法接受的3个参数分别为
         //数据类型
         //数据
         //缓冲类型，有这么几种可以供我们选择: 缓冲区的数据偶尔变动用GL_STREAM_DRAW ，缓冲区的数据不变用GL_STATIC_DRAW，缓冲区数据经常变动用GL_DYNAMIC_DRAW
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

         
         var color_buffer = gl.createBuffer();
         gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);


         var index_buffer = gl.createBuffer();
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
         gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
                                              
         /*=================== SHADERS =================== */

         var vertCode = 'attribute vec3 position;'+
                        'uniform mat4 Pmatrix;'+
                        'uniform mat4 Vmatrix;'+
                        'uniform mat4 Mmatrix;'+
                        'attribute vec3 color;'+//the color of the point
                        'varying vec3 vColor;'+
                        'void main(void) { '+//pre-built function
                           'gl_Position = Pmatrix*Vmatrix*Mmatrix*vec4(position, 1.);'+
                           'vColor = color;'+
                        '}';

         var fragCode = 'precision mediump float;'+
                        'varying vec3 vColor;'+
                        'void main(void) {'+
                           'gl_FragColor = vec4(vColor, 1.);'+
                        '}';

         //创建顶点着色器对象
         var vertShader = gl.createShader(gl.VERTEX_SHADER);
         //挂接GLSL源代码
         gl.shaderSource(vertShader, vertCode);
         //完成着色器（shader）的编译
         gl.compileShader(vertShader);


         ////创建片元着色器对象
         var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
         gl.shaderSource(fragShader, fragCode);
         gl.compileShader(fragShader);
         
         //创建和初始化一个 WebGLProgram 对象
         var shaderprogram = gl.createProgram();
         //往 WebGLProgram 添加一个片段或者顶点着色器
         gl.attachShader(shaderprogram, vertShader);
         gl.attachShader(shaderprogram, fragShader);
         //链接一个给定的WebGLProgram 到已附着的顶点着色器和片元着色器
         gl.linkProgram(shaderprogram);
         
         //返回了给定WebGLProgram对象中某属性的下标指向位置
         var _Pmatrix = gl.getUniformLocation(shaderprogram, "Pmatrix");
         var _Vmatrix = gl.getUniformLocation(shaderprogram, "Vmatrix");
         var _Mmatrix = gl.getUniformLocation(shaderprogram, "Mmatrix");

         //将缓冲区对象绑定到目标
         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
         var _position = gl.getAttribLocation(shaderprogram, "position");
         //vertexAttribPointer含义是告诉显卡从当前绑定的缓冲区（bindBuffer()指定的缓冲区）中读取顶点数据
         //第二个参数：size 是指_position的维度，由于类型是vec3，所以size = 3
         //type是指参数类型
         //normalized是指是否标准化（化为0-1范围）
         //第五个参数: stride，stride的意思是步长，单位是字节，指的是每个顶点数据所占的字节数
         //第六个参数: offset，这参数是指从shader程序的入口v3PositionIndex从bindBuffer()绑定的缓冲区偏移offset个字节
         //开始读数据，这里offset=0,指从绑定缓冲区首地址开始读
         gl.vertexAttribPointer(_position, 3, gl.FLOAT, false,0,0);
         gl.enableVertexAttribArray(_position);

         gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
         var _color = gl.getAttribLocation(shaderprogram, "color");
         gl.vertexAttribPointer(_color, 3, gl.FLOAT, false,0,0) ;
         gl.enableVertexAttribArray(_color);
         gl.useProgram(shaderprogram);

         /*==================== MATRIX ====================== */
         
         function get_projection(angle, a, zMin, zMax) {
            var ang = Math.tan((angle*.5)*Math.PI/180);//angle*.5
            return [
               0.5/ang, 0 , 0, 0,
               0, 0.5*a/ang, 0, 0,
               0, 0, -(zMax+zMin)/(zMax-zMin), -1,
               0, 0, (-2*zMax*zMin)/(zMax-zMin), 0 
               ];
         }
         
         var proj_matrix = get_projection(40, canvas.width/canvas.height, 1, 100);
         var mo_matrix = [ 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 ];
         var view_matrix = [ 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 ];

         view_matrix[14] = view_matrix[14]-6;

         /*================= Mouse events ======================*/

         var AMORTIZATION = 0.95;
         var drag = false;
         var old_x, old_y;
         var dX = 0, dY = 0;
            
         var mouseDown = function(e) {
            drag = true;
            old_x = e.pageX, old_y = e.pageY;
            e.preventDefault();
            return false;
         };
         
         var mouseUp = function(e){
            drag = false;
         };
         
         var mouseMove = function(e) {
            if (!drag) return false;
            dX = (e.pageX-old_x)*2*Math.PI/canvas.width,
            dY = (e.pageY-old_y)*2*Math.PI/canvas.height;
            THETA+= dX;
            PHI+=dY;
            old_x = e.pageX, old_y = e.pageY;
            e.preventDefault();
         };
         
         canvas.addEventListener("mousedown", mouseDown, false);
         canvas.addEventListener("mouseup", mouseUp, false);
         canvas.addEventListener("mouseout", mouseUp, false);
         canvas.addEventListener("mousemove", mouseMove, false);

         /*=========================rotation================*/

         function rotateX(m, angle) {
            var c = Math.cos(angle);
            var s = Math.sin(angle);
            var mv1 = m[1], mv5 = m[5], mv9 = m[9];
                
            m[1] = m[1]*c-m[2]*s;
            m[5] = m[5]*c-m[6]*s;
            m[9] = m[9]*c-m[10]*s;

            m[2] = m[2]*c+mv1*s;
            m[6] = m[6]*c+mv5*s;
            m[10] = m[10]*c+mv9*s;
         }

         function rotateY(m, angle) {
            var c = Math.cos(angle);
            var s = Math.sin(angle);
            var mv0 = m[0], mv4 = m[4], mv8 = m[8];
                
            m[0] = c*m[0]+s*m[2];
            m[4] = c*m[4]+s*m[6];
            m[8] = c*m[8]+s*m[10];

            m[2] = c*m[2]-s*mv0;
            m[6] = c*m[6]-s*mv4;
            m[10] = c*m[10]-s*mv8;
         }

         /*=================== Drawing =================== */

         var THETA = 0,
         PHI = 0;
         var time_old = 0;
                
         var animate = function(time) {
            var dt = time-time_old;
                    
            if (!drag) {
               dX *= AMORTIZATION, dY*=AMORTIZATION;
               THETA+=dX, PHI+=dY;
            }
               
            //set model matrix to I4
                    
            mo_matrix[0] = 1, mo_matrix[1] = 0, mo_matrix[2] = 0,
            mo_matrix[3] = 0,
                    
            mo_matrix[4] = 0, mo_matrix[5] = 1, mo_matrix[6] = 0,
            mo_matrix[7] = 0,
                    
            mo_matrix[8] = 0, mo_matrix[9] = 0, mo_matrix[10] = 1,
            mo_matrix[11] = 0,
                    
            mo_matrix[12] = 0, mo_matrix[13] = 0, mo_matrix[14] = 0,
            mo_matrix[15] = 1;

            rotateY(mo_matrix, THETA);
            rotateX(mo_matrix, PHI);
                    
            time_old = time; 
            gl.enable(gl.DEPTH_TEST);
                    
            // gl.depthFunc(gl.LEQUAL);
                    
            gl.clearColor(0.5, 0.5, 0.5, 0.9);
            gl.clearDepth(1.0);
            gl.viewport(0.0, 0.0, canvas.width, canvas.height);
            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

            gl.uniformMatrix4fv(_Pmatrix, false, proj_matrix);
            gl.uniformMatrix4fv(_Vmatrix, false, view_matrix);
            gl.uniformMatrix4fv(_Mmatrix, false, mo_matrix);

            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
            gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
                    
            window.requestAnimationFrame(animate);
         }
            
         animate(0);
    </script>
</body>
</html>











